<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting" :style="expendStyle">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>订单管理</a-breadcrumb-item>
        <a-breadcrumb-item>退款记录</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">审核通过时间</div>
          <template>
            <div style="margin: auto 50px">
              <a-range-picker
                :showTime="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                @ok="onOk"
                @change="onChange"
                :value="rangePicker()"
              />
            </div>
          </template>
          <div style="margin: 0px 10px 0px 50px">退款类型</div>
          <template>
            <a-select
              style="margin: 0 100px 0 16px; width: 200px"
              placeholder="退款类型"
              v-model="queryCondition.refundType"
              @change="selectRefundType"
              :allowClear="true"
            >
              <a-select-option v-for="p in types" :key="p.key" :value="p.key"
                >{{ p.name }}
              </a-select-option>
            </a-select>
          </template>
        </div>
      </div>
    </div>
    <!-- 表单 -->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div style="display: flex;">
            <a-button type="primary" @click="exportExcel" icon="download">导出记录</a-button>
        </div>
      </div>
      <!--数据表格-->
      <div class="box-table">
        <a-table
            rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          @change="tableChange"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName">
             <template slot="amountSlot" slot-scope="text" >
            <div style="text-align:center">{{ text == undefined || text == "" ? text : text / 100 }}</div>
          </template>
          <!-- 脚步 -->
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import refundApi from "../../api/order/refund";
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    width: "10%",
  },
  {
    title: "车牌",
    dataIndex: "plate",
    width: "7%",
  },
  {
    title: "开始时间",
    dataIndex: "startTime",
    width: "9%",
  },
  {
    title: "结束时间",
    dataIndex: "endTime",
    width: "10%",
  },
  {
    title: "支付时间",
    dataIndex: "orderTime",
    width: "10%",
  },
  {
    title: "退款金额",
    dataIndex: "amount",
    scopedSlots: {customRender: 'amountSlot'},
    width: "6%",
  },
  {
    title: "商户订单",
    dataIndex: "transactionOrderNo",
    width: "10%",
  },
  {
    title: "平台订单",
    dataIndex: "unifyOrderNo",
    width: "10%",
  },
  {
    title: "申请人",
    dataIndex: "user",
    width: "5%",
  },
  {
    title: "提交申请时间",
    dataIndex: "time",
    width: "10%",
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
];

const dataSource = [];

const queryCondition = {
  startTimeStamp: "",
  endTimeStamp: "",
  timeScreenCondition: 6,
  limit: "",
  curr: "1",
  refundType:"",
  searchType:""
};

export default {
  name: "ParkingRecord",

  /*数据层*/
  data() {
    return {
      selectedRowKeys:[],
      selectId: -1,
      momentArr: [],
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      queryCondition,
      loading: false,
      types:[
            {"key":"1","name":"余额退款"},
            {"key":"10","name":"订单渠道退款"},
            {"key":"11","name":"活动退款"},
            {"key":"12","name":"包月退款"}],
    };
  },

  /*方法层*/
  methods: {
    /**表格**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
      this.queryCondition.curr = 0;
    },
    selectRefundType(){
        this.queryData();
    },
    /*时间按钮控制*/
    button_time(e) {
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },

    rangePicker() {
      return this.momentArr;
    },
    getQueryCondition() {
      let startTimeStamp = "";
      let endTimeStamp = "";
      if (this.momentArr != undefined && this.momentArr.length != 0) {
        this.queryCondition.timeScreenCondition = "6";
        startTimeStamp = new Date(this.momentArr[0]).getTime() / 1000;
        endTimeStamp = new Date(this.momentArr[1]).getTime() / 1000;
      } 
      this.queryCondition.startTimeStamp = startTimeStamp;
      this.queryCondition.endTimeStamp = endTimeStamp;
      this.queryCondition.curr=this.pagination.current;
      this.queryCondition.limit=this.pagination.defaultPageSize;
    },

    /* ---------------- 维度变化 -------------- */
    onChange(date) {
      this.selectId = -1;
      this.momentArr = date;
    },

    onOk() {
      this.selectId = -1;
      this.queryData();
    },

    selectParkChange() {
      this.queryData();
    },

    /* ---------------- 查询 ---------------- */
    queryData() {
      this.loading = true;
      this.getQueryCondition();
      this.queryCondition.searchType=1
      refundApi.getAllCustomerRefundReview(this.queryCondition)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((error) => {
          console.log("获取退款记录数据异常！", error);
          this.loading = false;
        });
    },
    // 导出退款记录
    exportExcel(){
      this.getQueryCondition();
      this.queryCondition.searchType=1
      //编辑
     
      refundApi.exportExcel(this.queryCondition).then((res) => {
          const link = document.createElement('a');
          const blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
          link.href = URL.createObjectURL(blob);
          var fileName = decodeURIComponent(res.headers.filename);
          if(fileName == null || fileName == 'undefined'){
              fileName="退款记录.xlsx"
          }
          link.style.display = 'none';

          link.setAttribute('download', `${fileName}`);
          link.click();
          // document.body.removeChild(link) // 下载完成移除元素
          // window.URL.revokeObjectURL(link.href)
      }).catch(err => {
          console.log("error")
          console.log(err)
          let data = err.data;
          if (data) {
              return this.$message.warn(data);
          }
      });
    },
    nowTime() {
      let yy = new Date().getFullYear();
      var mm =
        new Date().getMonth() < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      var dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      return yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },

    /* ---------------- 表格 ---------------- */
    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.id;
          }, // 点击行
          dblclick: () => {
            this.showCorrectionPopup(record);
          },
        },
      };
    },
    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /**--------------------审核通过多选框------------------------- */ 
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    clearSelectArray() {
      this.selectedRowKeys = [];
    },
    review(){
       console.log(this.selectedRowKeys);
       refundApi.refundReview({list:this.selectedRowKeys}).then((res)=>{
           console.log(1)
           if(res.code===2000){
              this.$message.success("退款成功!");
              this.queryData();
           }else{
              this.$message.error(res.msg+" 退款失败!");
           }
       }).catch((err)=>{
             console.log(2)
           this.$message.error(err+" 退款失败!");
       });
    }
  },

  /*计算层*/
  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },

    expendStyle() {
      return this.isExpand ? "" : "height: 150px; overflow: hidden;";
    },
    computedDue() {
      let dataSource = this.dataSource || [];
      let result = 0;
      dataSource.forEach((item) => {
        result += isNaN(parseInt(item.shouldMoney))
          ? 0
          : parseInt(item.shouldMoney);
      });
      return result / 100;
    },
  },

  /*渲染层*/
  mounted() {
    this.button_time(0);
  },
  destroyed() {
    //清除定时器
    window.clearInterval(this.time);
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  padding-bottom: 40px;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/* 展开 */
.box-expand {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* text */
  cursor: pointer;
  line-height: 40px;
  font-size: 15px;
  text-align: center;
  color: #020202;
  background: white;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-body {
  padding-top: 15px;
}

.box-condition-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
}

.box-condition-item .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%; /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}

.box-correction-popup .box-correct {
  margin: 0 15px;
  width: 310px;
  height: 500px;
}

.box-correction-popup .box-correct .item-correct {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box-correction-popup .box-correct .item-correct .text-correct {
  font-weight: 300;
  font-size: 14px;
  width: 100px;
}

.box-correction-popup .box-correct .item-correct .text-value {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.428571429;
  color: #020202;
}
</style>
